<template>
	<div class="show-dialog">
		<el-dialog
			title="标签详情"
			center
			:visible.sync="dialogVisible"
			width="30%"
			:before-close="handleClose"
		>
			<p>
				<span>名称:</span>
				<span>{{ queryForm.name || "-" }}</span>
			</p>
			<p class="projects">
				<span>所属项目:</span>
				<span v-for="(item,index) in queryForm.projects" :key="item.projectId">
					{{ item.projectName || "-" }}
					<i v-if="index !== queryForm.projects.length - 1">{{ "、" }}</i>
				</span>
			</p>
			<p>
				<span>属性:</span>
				<span>{{ queryForm.labelProperty|veDict('labelProperty') }}</span>
			</p>
			<p>
				<span>状态:</span>
				<span>{{ queryForm.availableState|veDict('availableState') }}</span>
			</p>
			<p>
				<span>应用范围:</span>
				<span>{{ queryForm.applyScopesStr }}</span>
			</p>
			<p>
				<span>是否必填:</span>
				<span>{{ queryForm.isRequired |veDict('isRequired') }}</span>
			</p>
			<p>
				<span>标签值:</span>
				<span>{{ queryForm.labelStr }}</span>
				<!-- <span v-for="item in queryForm.labelDetails" :key="item.id">{{ item.name+"、 " || "" }}</span> -->
			</p>
			<p>
				<span>备注说明:</span>
				<span>{{ queryForm.remark || "无" }}</span>
			</p>
		</el-dialog>
	</div>
</template>

<script>
	import tagApi from "../../../../apis/rc/tag.mjs";
	export default {
		name: "show-dialog",
		props: {
			dialogVisible: {
				type: Boolean,
				default: () => false
			},
			id: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				queryForm: {
					name: "",
					projectNames: "",
					labelProperty: "",
					availableState: "",
					applyScopes: "",
					isRequired: "",
					labelDetails: [],
					remark: ""
				}
			};
		},
		methods: {
			handleClose() {
				this.$emit("hand-close-show-detail-dialog");
			},
			onQueryForm(id) {
				let params = {};
				params.id = id;
				tagApi.showTableDataItem({
					data: params,
					success: (res) => {
						let applyScopesStr = "";
						res.applyScopes.forEach((item) => {
							applyScopesStr = applyScopesStr + Dictionary.get("applyScopes")[item] + "、";
						});
						applyScopesStr = applyScopesStr.substring(0, applyScopesStr.length - 1);
						// eslint-disable-next-line no-unused-vars
						let labelStr = "";
						this.queryForm = { ...this.queryForm, ...res };
						this.queryForm.labelDetails.forEach((item) => {
							if (item.availableState === "Y") {
								labelStr += item.name + "、";
							}
						});
						labelStr = labelStr.substring(0, labelStr.length - 1);
						this.queryForm.labelStr = labelStr;
						this.queryForm.applyScopesStr = applyScopesStr;
					}
				});
			}
		},
		created() {
			this.onQueryForm(this.id);
		}
	};
</script>

<style lang="less" scoped>
	.show-dialog {
		p {
			margin-bottom: 18px;
			padding: 0px 40px 0px;
			line-height: 33px;
		}
	}
	.projects {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>